<style>

.leftButton {
  position: absolute;
  top: 51%;
  transform: translateY(-51%);
}

.el-button.is-circle {
  border-radius: 0%;
}

.el-button--mini.is-circle {
  padding: 4px;
}

.rule_tree_root {
  width: 25px;
  display: flex;
  /*margin: 20px 10px;*/
}

.rule_tree_item {
  display: flex;
  padding: 0 0 0 10px !important;
}

.rule_tree_left {
  display: flex;
  flex-direction: column;
  justify-content: center;

  width: 20px;
  margin-right: 12px;
}

.rule_tree_left_top {
  width: 95%;
  top: 15px;
  position: relative;
  flex-grow: 2;

  margin-left: 11px;
  margin-bottom: 15px;

  border-radius: 1px;
  border-left: 1px solid #d3dce6;
  border-top: 1px solid #d3dce6;
  border-bottom: 1px solid #d3dce6;
}

.rule_tree_left_bottom {
  width: 100%;
  bottom: 15px;
  position: relative;
  /*flex-grow: 2;*/

  margin-left: 16px;
  margin-top: 15px;

  border-left: 1px solid #d3dce6;
  border-radius: 1px;
  /*border-bottom: 1px solid #d3dce6;*/
}

.rule_tree_right {
  width: calc(100% - 55px);
}

.drawer_from_item {
  margin-top: 20px;
}

.drawer_from_item_inner {
  width: 90%;
}
</style>
<template>
  <div>
    <el-row :class="root?'rule_tree_root':'rule_tree_item'">
      <el-col class="rule_tree_left">
        <el-row v-for="(model, index) in relationModel" :key="index">
          <el-row>
            <el-form
              style="line-height: 40px;height: 40px;display: flex;" :inline="true" class="demo-form-inline">
              <el-form-item prop="sourceNodeUuid">
                <el-select filterable
                           :disabled="!root"
                           @change="sourceNodeChange"
                           style="width: 180px"
                           v-model="model.sourceNodeUuid"
                           @click.native="refreshNodeUuid(model.sourceNodeUuid)"
                           placeholder="开始节点">
                  <el-option
                    v-for="item in selectors.nodeOptions"
                    :key="item.value"
                    :label="item.label"
                    :disabled="item.disabled"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item prop="edgeStyleUuid">
                <el-select filterable
                           style="width: 180px"
                           @change="refreshSelf()"
                           v-model="model.edgeStyleUuid"
                           placeholder="边样式">
                  <el-option
                    v-for="item in selectors.edgeStyleOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item prop="targetNodeUuid">
                <el-select filterable
                           style="width: 180px"
                           @change="((val)=>{targetNodeChange(val,index)})"
                           @click.native="refreshNodeUuid(model.targetNodeUuid)"
                           v-model="model.targetNodeUuid"
                           placeholder="目标节点">
                  <el-option
                    v-for="item in selectors.nodeOptions"
                    :key="item.value"
                    :disabled="item.disabled"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item prop="hoverName">
                <el-input style="width: 180px" v-on:input="refreshSelf()" v-model="model.hoverName" placeholder="边悬浮名称"></el-input>
              </el-form-item>
              <el-form-item>
                <el-tooltip content="删除记录" placement="top">
                  <el-popconfirm
                    confirm-button-text='删除'
                    cancel-button-text='我再想想'
                    confirm-button-type="danger"
                    icon="el-icon-delete"
                    icon-color="red"
                    @onConfirm="deleteOne(index)"
                    title="确定删除吗？如有子节点会一并删除！">
                    <el-button
                      slot="reference" :disabled="root" type="danger" icon="el-icon-delete" circle size="mini">
                    </el-button>
                  </el-popconfirm>
                </el-tooltip>
              </el-form-item>
              <el-form-item>
                <el-tooltip content="增加兄弟" placement="top">
                  <el-button :disabled="root" type="primary" icon="el-icon-circle-plus" circle size="mini"
                             @click="addBrother(index)">
                  </el-button>
                </el-tooltip>
              </el-form-item>
              <el-form-item>
                <el-tooltip content="增加孩子" placement="top">
                  <el-button type="warning" icon="el-icon-circle-plus-outline" circle size="mini"
                             @click="addChild(index)">
                  </el-button>
                </el-tooltip>
              </el-form-item>
              <el-form-item>
                <el-tooltip content="详细设计" placement="top">
                  <el-button type="success" icon="el-icon-right" circle size="mini"
                             @click="editModelDetail(index)">
                  </el-button>
                </el-tooltip>
              </el-form-item>
            </el-form>
            <rule-tree-node
              v-if="model.children && model.children.length>0"
              :relation-model="model.children"
              :selectors="selectors"
              :root-list="rootList"
              :root="false"
            >
            </rule-tree-node>
          </el-row>
        </el-row>
      </el-col>
    </el-row>

    <el-drawer
      title="单节点详细设计"
      size="40%"
      :visible.sync="modelDetailFlag"
      append-to-body
      :with-header="true">
      <el-card style="margin-left: 20px;margin-right: 20px">
        <el-form
          label-position="right"
          ref="relationModelDetailForm" :model="relationModelDetail" label-width="180px">
          <el-form-item label="开始节点样式" prop="sourceStyleUuid">
            <!--  -->
            <el-select filterable
                       @change="refreshSelf()"
                       :disabled="!root"
                       v-model="relationModelDetail.sourceStyleUuid"
                       placeholder="开始节点样式">
              <el-option
                v-for="item in selectors.nodeStyleOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="开始节点匹配类型" prop="sourceNodeDataMode">
            <el-select filterable
                       :disabled="!root"
                       @change="refreshSelf()"
                       v-model="relationModelDetail.sourceNodeDataMode"
                       placeholder="开始节点匹配类型">
              <el-option
                v-for="item in selectors.nodeDataModeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="开始节点匹配值" prop="sourceNodeDataKey">
            <el-input
              :disabled="!root"
              style="width: 200px"
              v-on:input="refreshSelf()"
              v-model="relationModelDetail.sourceNodeDataKey"
              placeholder="开始节点匹配值"></el-input>
          </el-form-item>
          <el-form-item label="结束节点样式" prop="targetStyleUuid">
            <el-select filterable
                       @change="targetStyleChange()"
                       v-model="relationModelDetail.targetStyleUuid"
                       placeholder="结束节点样式">
              <el-option
                v-for="item in selectors.nodeStyleOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="结束节点匹配类型" prop="targetNodeDataMode">
            <el-select filterable
                       @change="targetNodeDataModeChange()"
                       v-model="relationModelDetail.targetNodeDataMode"
                       placeholder="结束节点匹配类型">
              <el-option
                v-for="item in selectors.nodeDataModeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="结束节点匹配值" prop="targetNodeDataKey">
            <el-input style="width: 200px" v-on:input="targetNodeDataKeyChange()" v-model="relationModelDetail.targetNodeDataKey" placeholder="结束节点匹配值"></el-input>
          </el-form-item>
        </el-form>
      </el-card>
    </el-drawer>
  </div>
</template>
<script>

export default {
  name: "ruleTreeNode",
  filters: {},
  props: ['relationModel', "selectors", "root", "rootList"],
  components: {},
  data() {
    return {
      tempRelationModel: {
        sourceNodeUuid: '',
        sourceStyleUuid: '',
        sourceNodeDataKey: '',
        sourceNodeDataMode: '',
        targetNodeUuid: '',
        targetStyleUuid: '',
        targetNodeDataKey: '',
        targetNodeDataMode: '',
        edgeStyleUuid: '',
        hoverName: '',
        children: []
      },
      modelDetailFlag: false,
      relationModelDetail: {},
      nodeUuid: '',
    }
  },
  created() {
  },
  mounted() {
  },
  methods: {
    deleteOne(index) {
      let vm = this
      vm.relationModel.splice(index, 1)
      vm.$forceUpdate()
    },
    addBrother(index) {
      let vm = this
      let currentModel = vm.relationModel[index];
      if (!vm.validateCurrent(currentModel)) {
        return
      }

      let obj = vm.$cloneObj(vm.tempRelationModel);
      obj.sourceNodeUuid = currentModel.sourceNodeUuid
      obj.sourceStyleUuid = currentModel.sourceStyleUuid
      obj.sourceNodeDataKey = currentModel.sourceNodeDataKey
      obj.sourceNodeDataMode = currentModel.sourceNodeDataMode
      vm.relationModel.push(obj)
      vm.$forceUpdate()
    },
    addChild(index) {
      let vm = this
      let currentModel = vm.relationModel[index];
      if (!vm.validateCurrent(currentModel)) {
        return
      }

      currentModel.children = []

      let obj = vm.$cloneObj(vm.tempRelationModel);
      obj.sourceNodeUuid = currentModel.targetNodeUuid
      obj.sourceStyleUuid = currentModel.targetStyleUuid
      obj.sourceNodeDataKey = currentModel.targetNodeDataKey
      obj.sourceNodeDataMode = currentModel.targetNodeDataMode
      currentModel.children.push(obj)
      vm.$forceUpdate()
    },
    validateCurrent(currentModel) {
      if (currentModel.sourceNodeUuid === '') {
        this.$message({type: 'error', message: '开始节点必须选择'})
        return false
      }
      if (currentModel.sourceStyleUuid === '') {
        this.$message({type: 'error', message: '开始节点样式必须选择'})
        return false
      }
      if (currentModel.sourceNodeDataKey === '') {
        this.$message({type: 'error', message: '开始节点唯一Key必须填写'})
        return false
      }
      if (currentModel.sourceNodeDataMode === '') {
        this.$message({type: 'error', message: '开始节点匹配模式必须选择'})
        return false
      }
      if (currentModel.targetNodeUuid === '') {
        this.$message({type: 'error', message: '结束节点必须选择'})
        return false
      }
      if (currentModel.targetStyleUuid === '') {
        this.$message({type: 'error', message: '结束节点样式必须选择'})
        return false
      }
      if (currentModel.targetNodeDataKey === '') {
        this.$message({type: 'error', message: '结束节点唯一Key必须填写'})
        return false
      }
      if (currentModel.targetNodeDataMode === '') {
        this.$message({type: 'error', message: '结束节点匹配模式必须选择'})
        return false
      }
      if (currentModel.edgeStyleUuid === '') {
        this.$message({type: 'error', message: '边样式必须选择'})
        return false
      }
      return true
    },
    editModelDetail(index) {
      let vm = this
      vm.modelDetailFlag = true
      vm.relationModelDetail = vm.relationModel[index]
    },
    refreshSelf() {
      let vm = this
      vm.$forceUpdate()
    },
    refreshNodeUuid(nodeUuid) {
      this.nodeUuid = nodeUuid
    },
    // 无需实现
    sourceNodeChange(value) {
      let vm = this
      // 将node禁用掉、或者其他的node释放掉
      vm.releaseNode(value)
      vm.$forceUpdate()
    },
    targetNodeChange(value, index) {
      let vm = this
      // 将node禁用掉、或者其他的node释放掉
      vm.releaseNode(value)
      // 如果有孩子节点，需要将孩子节点的数据更新
      let children = vm.relationModel[index].children;
      if (children && children.length > 0) {
        for (let i = 0; i < children.length; i++) {
          children[i].sourceNodeUuid = value
        }
      }
      vm.$forceUpdate()
    },
    releaseNode(value) {
      let vm = this
      vm.doReleaseNode(value, vm.selectors.nodeOptions)
      // 需要将父亲节点 nodeOptions 也更新
      vm.rootList.refreshNodeSelectors(vm.$cloneObj(vm.selectors.nodeOptions));
      vm.$forceUpdate()
    },
    doReleaseNode(value, nodeOptions) {
      let vm = this
      for (let i = 0; i < nodeOptions.length; i++) {
        let nodeOption = nodeOptions[i];
        if (nodeOption.value === value) {
          nodeOption.disabled = true
        }
        if (nodeOption.value === vm.nodeUuid) {
          nodeOption.disabled = false
        }
      }
    },
    // 对于节点的样式、匹配类型、节点匹配值，只能从父节点进行修改和继承
    targetStyleChange() {
      let vm = this
      let children = vm.relationModelDetail.children;
      if (children && children.length > 0) {
        for (let i = 0; i < children.length; i++) {
          children[i].sourceStyleUuid = vm.relationModelDetail.targetStyleUuid
        }
      }
      vm.$forceUpdate()
    },
    targetNodeDataModeChange() {
      let vm = this
      let children = vm.relationModelDetail.children;
      if (children && children.length > 0) {
        for (let i = 0; i < children.length; i++) {
          children[i].sourceNodeDataMode = vm.relationModelDetail.targetNodeDataMode
        }
      }
      vm.$forceUpdate()
    },
    targetNodeDataKeyChange() {
      let vm = this
      let children = vm.relationModelDetail.children;
      if (children && children.length > 0) {
        for (let i = 0; i < children.length; i++) {
          children[i].sourceNodeDataKey = vm.relationModelDetail.targetNodeDataKey
        }
      }
      vm.$forceUpdate()
    },
  },
}
</script>
